document.getElementById('capture').addEventListener('click', async () => {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    // Get the full height of the page
    const height = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
      )
    });
    
    // Scroll and capture the full page
    const images = [];
    const viewportHeight = 1000; // Viewport height to capture at a time
    const totalScrolls = Math.ceil(height[0].result / viewportHeight);
    
    for (let i = 0; i < totalScrolls; i++) {
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: (scrollTo) => window.scrollTo(0, scrollTo),
        args: [i * viewportHeight]
      });
      
      // Wait for scrolling to complete
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // Capture visible portion
      const imageData = await chrome.tabs.captureVisibleTab({
        format: 'png',
        quality: 100
      });
      
      images.push({
        data: imageData,
        y: i * viewportHeight
      });
    }
    
    // Combine images (this is a simplified version)
    // In a real implementation, you'd need to stitch them together properly
    const finalImage = images[0].data; // Just using first image for demo
    
    // Download the image
    const link = document.createElement('a');
    link.href = finalImage;
    link.download = 'fullpage-screenshot.png';
    link.click();
    
  } catch (error) {
    console.error('Error capturing screenshot:', error);
  }
});